import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

/**
 * 注意：
 * 渲染图表必须保证所需要的容器可用
 * 也就是对应的dom必须渲染出来
 */

const BarChart = ({ option }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    // 保证dom可用，才进行图表的渲染
    // const myEchart = echarts.init(document.getElementById('e-charts'));
    const myChart = echarts.init(chartRef.current);
    option && myChart.setOption(option);
  }, [option]);

  return <div ref={chartRef} className="bar-chart"></div>;
};

export default BarChart;
